<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../../css/register.css" />
    <script src="../../js/vue-v2.6.10.js"></script>
    <script src="../../js/axios-0.18.0.js"></script>
</head>

<body>
    <div id="app">
        <div class="pos">
            <div class="login">
                <span class="close iconfont icon-close"></span>
                <img src="../../img/login/loginlogo.png" alt="">
                <ul>
                    <li></li>
                    <li style="margin-bottom: 30px;font-size: 16px;color: red;" v-html="msg"></li>
                    <li></li>
                </ul>
                <form action="" method="post" id="form">
                    <input type="text"  placeholder="请输入姓名" v-model="user.name" @blur="validateName(user.name)">
                    <input type="text" placeholder="请输入您的手机号" v-model="user.phone" @blur="validatePhone(user.phone)">
                    <input type="password"  placeholder="请再次输入密码" v-model="user.password" @blur="validatePassword(user.password)">
                    <input type="text" class="yanzhen" placeholder="请输入验证码" v-model="user.verCode" @blur="validateVerCode(user.verCode)">
                    <span class="yanzhenma">{{code}}</span>
                    <div class="clear"></div>
                    <div class="loginbtn" style="margin-left: 110px;line-height: 40px;" @click="submitForm()">注册</div>
                </form>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            code:"",//生成验证码
            user:{
                name:"",
                phone:"",
                password:"",
                verCode:""
            },
            msg:"",//错误消息提示
            flag1:false,//姓名
            flag2:false,//手机号
            flag3:false,//密码
            flag4:false,//验证码


        },
        methods: {
            initCode(){
                var str="";
                var source="0123456789abcdefghijklmnopqrstuvwxyz";
                //生成4位的验证码
                for(var i=0;i<4;i++){
                    var num = Math.floor(Math.random()*source.length);
                    str+=source[num];
                }
                this.code=str;
            },
            validateName(val){
                this.msg="";
                if(val==null||val.trim()==""){
                    this.msg="用户名不能为空";
                    return;
                }
                this.flag1=true;
            },
            //验证手机号
            validatePhone(val){
                this.msg="";
                if(val==null||val.trim()==""){
                    this.msg="手机号不能为空";
                    return;
                }
                var reg = /^1[3|4|5|6|7|8][0-9]{9}$/;
                if(!reg.test(val)){
                    this.msg="手机号格式不正确";
                    return;
                }
                axios.get("http://localhost:8080/myedu/fuser?method=checkPhone&phone="+val).then(resp=>{
                    if(resp.data.code==1){
                        this.msg = "该手机号已被注册";
                    }else{
                        
                        this.msg="<font style='color: green;'>验证通过</font>";
                        this.flag2=true;

                    }
                })
            },
            validatePassword(val){
                this.msg="";
                if(val==null||val.trim()==""){
                    this.msg="密码不能为空";
                    return;
                }
                this.flag3=true;
            },
            validateVerCode(val){
                this.msg="";
                if(val==null||val.trim()==""){
                    this.msg="验证码不能为空";
                    return;
                }
                //验证码正确性验证
                if(this.code!=val){
                    this.msg="验证码不正确";
                    return;
                }
                this.flag4=true;
            },
            submitForm(){
                if(this.flag1&&this.flag2&&this.flag3&&this.flag4){

                    var params = new URLSearchParams();
                    params.append("name",this.user.name);
                    params.append("password",this.user.password);
                    params.append("phone",this.user.phone);
                    axios.post("http://localhost:8080/myedu/fuser?method=register",params).then(resp =>{
                        alert(resp.data.msg);
                        if(resp.data.code==200){
                            location.href="login.html";
                        }else{
                            location.href="register.html";
                        }
                    })
                }else{
                    alert("表单验证失败")
                }
            }

        },
        created() {
            this.initCode();
        },

    })
</script>


</html>